<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style type="text/css">
			.walk_show {
				width: 120px;
				height: 182px;
				border: 1px solid #333;
				margin: 50px auto 0;
				/*overflow:hidden;*/
				position: relative;
			}
			
			.walk_show img {
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
		<script type="text/javascript">
			/*
											  制作关键帧动画：
											  提示：通过定时器，定时改变div中的img的left属性值，img是定位在div中的，每次改变的值为120px，建议100毫秒改变一次，时间间隔还可以更长一点，通过调整设置最佳的时间间隔。

									       */
			window.onload = function() {
				var oImage = document.getElementById("img01")
				var num = 0;
				setInterval(function() {
					// 判断在框框里面至少有一个人，那么一共是8个图片，所以通过120 * 7
					if(num < -840) {
						num = 120
					}
					// 一次走120个像素
					num -= 120;
					oImage.style.left = num + 'px'
				}, 100)
			}
		</script>
	</head>

	<body>
		<p>使用下面这张图片制作关键帧动画</p>
		<img src="images/walking.png" alt="人物走路">
		<div class="walk_show">
			<img src="images/walking.png" alt="人物走路" id="img01">
		</div>
	</body>

</html>